<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提醒间隔测试</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            max-width: 1000px; 
            margin: 0 auto; 
            padding: 20px;
            background: #f5f5f5;
        }
        .test-case { 
            background: white;
            margin: 15px 0; 
            padding: 20px; 
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .task-info { 
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
        }
        .reminder-info {
            background: #dbeafe;
            border: 1px solid #3b82f6;
            border-radius: 8px;
            padding: 12px;
            margin: 10px 0;
        }
        .success { color: #22c55e; font-weight: bold; }
        .warning { color: #f59e0b; font-weight: bold; }
        .error { color: #ef4444; font-weight: bold; }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        .interval-card {
            background: white;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .interval-card:hover {
            border-color: #3b82f6;
            background: #f0f9ff;
        }
        .interval-card.active {
            border-color: #3b82f6;
            background: #dbeafe;
        }
        button {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            margin: 10px 5px 10px 0;
            font-size: 16px;
        }
        button:hover { background: #2563eb; }
        button:disabled { 
            background: #9ca3af; 
            cursor: not-allowed;
        }
        .time-display {
            font-family: 'Courier New', monospace;
            font-size: 18px;
            font-weight: bold;
            color: #1f2937;
        }
    </style>
</head>
<body>
    <h1>⏰ 自定义提醒间隔测试</h1>
    <p>测试新的个性化提醒间隔功能</p>
    
    <!-- 提醒间隔选择 -->
    <div class="test-case">
        <h3>📋 选择提醒间隔</h3>
        <div class="grid">
            <div class="interval-card" data-minutes="5">
                <div style="font-size: 24px; margin-bottom: 8px;">⚡</div>
                <div style="font-weight: bold;">5分钟</div>
                <div style="font-size: 12px; color: #666;">急迫任务</div>
            </div>
            <div class="interval-card" data-minutes="15">
                <div style="font-size: 24px; margin-bottom: 8px;">🔔</div>
                <div style="font-weight: bold;">15分钟</div>
                <div style="font-size: 12px; color: #666;">常规提醒</div>
            </div>
            <div class="interval-card active" data-minutes="30">
                <div style="font-size: 24px; margin-bottom: 8px;">⏰</div>
                <div style="font-weight: bold;">30分钟</div>
                <div style="font-size: 12px; color: #666;">默认间隔</div>
            </div>
            <div class="interval-card" data-minutes="60">
                <div style="font-size: 24px; margin-bottom: 8px;">🕐</div>
                <div style="font-weight: bold;">1小时</div>
                <div style="font-size: 12px; color: #666;">提前准备</div>
            </div>
            <div class="interval-card" data-minutes="120">
                <div style="font-size: 24px; margin-bottom: 8px;">🕑</div>
                <div style="font-weight: bold;">2小时</div>
                <div style="font-size: 12px; color: #666;">重要会议</div>
            </div>
            <div class="interval-card" data-minutes="1440">
                <div style="font-size: 24px; margin-bottom: 8px;">📅</div>
                <div style="font-weight: bold;">1天</div>
                <div style="font-size: 12px; color: #666;">重大事件</div>
            </div>
        </div>
    </div>

    <!-- 模拟任务测试 -->
    <div class="test-case">
        <h3>🎯 提醒逻辑测试</h3>
        
        <div class="task-info">
            <h4>📋 模拟任务信息</h4>
            <div><strong>任务标题:</strong> <span id="taskTitle">重要会议准备</span></div>
            <div><strong>截止时间:</strong> <span id="dueDateTime" class="time-display">2024-12-19 15:30</span></div>
            <div><strong>提醒间隔:</strong> <span id="reminderInterval">30分钟</span></div>
        </div>

        <div class="reminder-info">
            <h4>🔔 提醒计算结果</h4>
            <div><strong>提醒时间:</strong> <span id="reminderTime" class="time-display">2024-12-19 15:00</span></div>
            <div><strong>距离提醒:</strong> <span id="timeToReminder">还有 2小时30分钟</span></div>
            <div><strong>提醒状态:</strong> <span id="reminderStatus" class="warning">等待中</span></div>
        </div>

        <button onclick="testReminderLogic()">🧪 测试提醒逻辑</button>
        <button onclick="simulateTimePass()">⏭️ 模拟时间流逝</button>
        <button onclick="resetTest()">🔄 重置测试</button>
    </div>

    <!-- 测试结果 -->
    <div id="testResults"></div>

    <script>
        let selectedReminderMinutes = 30;
        let currentTime = new Date();
        let dueDateTime = new Date(currentTime.getTime() + 3 * 60 * 60 * 1000); // 3小时后

        // 初始化
        function init() {
            updateTimeDisplay();
            calculateReminder();
            
            // 绑定提醒间隔选择事件
            document.querySelectorAll('.interval-card').forEach(card => {
                card.addEventListener('click', function() {
                    document.querySelectorAll('.interval-card').forEach(c => c.classList.remove('active'));
                    this.classList.add('active');
                    selectedReminderMinutes = parseInt(this.dataset.minutes);
                    updateReminderInterval();
                    calculateReminder();
                });
            });
        }

        function updateTimeDisplay() {
            document.getElementById('dueDateTime').textContent = formatDateTime(dueDateTime);
        }

        function updateReminderInterval() {
            const intervalText = selectedReminderMinutes < 60 ? 
                `${selectedReminderMinutes}分钟` : 
                selectedReminderMinutes === 60 ? '1小时' : 
                selectedReminderMinutes === 120 ? '2小时' : '1天';
            document.getElementById('reminderInterval').textContent = intervalText;
        }

        function calculateReminder() {
            const reminderTime = new Date(dueDateTime.getTime() - (selectedReminderMinutes * 60 * 1000));
            const timeToReminder = reminderTime.getTime() - currentTime.getTime();
            
            document.getElementById('reminderTime').textContent = formatDateTime(reminderTime);
            
            if (timeToReminder > 0) {
                const hours = Math.floor(timeToReminder / (1000 * 60 * 60));
                const minutes = Math.floor((timeToReminder % (1000 * 60 * 60)) / (1000 * 60));
                document.getElementById('timeToReminder').textContent = `还有 ${hours}小时${minutes}分钟`;
                document.getElementById('reminderStatus').textContent = '等待中';
                document.getElementById('reminderStatus').className = 'warning';
            } else if (dueDateTime > currentTime) {
                document.getElementById('timeToReminder').textContent = '应该发送提醒';
                document.getElementById('reminderStatus').textContent = '提醒时间已到';
                document.getElementById('reminderStatus').className = 'success';
            } else {
                document.getElementById('timeToReminder').textContent = '任务已过期';
                document.getElementById('reminderStatus').textContent = '已过期';
                document.getElementById('reminderStatus').className = 'error';
            }
        }

        function testReminderLogic() {
            const resultsDiv = document.getElementById('testResults');
            
            const testCases = [
                { minutes: 5, scenario: '急迫任务（5分钟前提醒）' },
                { minutes: 15, scenario: '常规任务（15分钟前提醒）' },
                { minutes: 30, scenario: '默认任务（30分钟前提醒）' },
                { minutes: 60, scenario: '重要任务（1小时前提醒）' },
                { minutes: 120, scenario: '重要会议（2小时前提醒）' },
                { minutes: 1440, scenario: '重大事件（1天前提醒）' }
            ];

            let html = '<div class="test-case"><h3>📊 测试结果</h3>';
            
            testCases.forEach((testCase, index) => {
                const testDueTime = new Date(currentTime.getTime() + 2 * 60 * 60 * 1000); // 2小时后
                const reminderTime = new Date(testDueTime.getTime() - (testCase.minutes * 60 * 1000));
                const shouldRemind = reminderTime <= currentTime && testDueTime > currentTime;
                
                html += `
                    <div class="task-info">
                        <h4>测试 ${index + 1}: ${testCase.scenario}</h4>
                        <div><strong>截止时间:</strong> ${formatDateTime(testDueTime)}</div>
                        <div><strong>提醒时间:</strong> ${formatDateTime(reminderTime)}</div>
                        <div><strong>是否提醒:</strong> <span class="${shouldRemind ? 'success' : 'warning'}">${shouldRemind ? '✅ 是' : '❌ 否'}</span></div>
                        <div><strong>逻辑:</strong> ${shouldRemind ? '提醒时间已到且任务未过期' : '提醒时间未到或任务已过期'}</div>
                    </div>
                `;
            });
            
            html += '</div>';
            resultsDiv.innerHTML = html;
        }

        function simulateTimePass() {
            // 模拟时间前进1小时
            currentTime = new Date(currentTime.getTime() + 60 * 60 * 1000);
            calculateReminder();
            
            // 显示模拟结果
            const resultsDiv = document.getElementById('testResults');
            resultsDiv.innerHTML = `
                <div class="test-case">
                    <h3>⏭️ 时间模拟</h3>
                    <div class="reminder-info">
                        <div><strong>当前时间:</strong> ${formatDateTime(currentTime)}</div>
                        <div><strong>操作:</strong> 时间前进了1小时</div>
                        <div><strong>结果:</strong> 提醒逻辑已重新计算</div>
                    </div>
                </div>
            `;
        }

        function resetTest() {
            currentTime = new Date();
            dueDateTime = new Date(currentTime.getTime() + 3 * 60 * 60 * 1000);
            selectedReminderMinutes = 30;
            
            document.querySelectorAll('.interval-card').forEach(c => c.classList.remove('active'));
            document.querySelector('[data-minutes="30"]').classList.add('active');
            
            updateTimeDisplay();
            updateReminderInterval();
            calculateReminder();
            
            document.getElementById('testResults').innerHTML = '';
        }

        function formatDateTime(date) {
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
        }

        // 初始化页面
        init();
    </script>
</body>
</html>
